<script setup lang="ts">
import { reactive } from 'vue'
import pubsub from 'pubsub-js'
import { ElMessage } from 'element-plus'
import { getUser } from '@/utils/local'

type stringKey = Record<string, any>
const state: stringKey = reactive({
    ifShow: false,
    user: ''
})
const open = () => {
    state.ifShow = true
    const user = getUser()
    state.user = user
    const el: any = document.querySelector('.user-warp .user')
}
const loginOut = () => {
    localStorage.clear()
    state.ifShow = false
    pubsub.publish('updateUser')
    ElMessage({
        message: '退出登录成功',
        type: 'success',
    })
}
defineExpose({
    open
})
</script>
<template>
    <div class="user-warp" v-show="state.ifShow">
        <Transition>
            <div class="user" v-show="state.ifShow">
                <div class="close" @click="() => { state.ifShow = false }">
                    <el-icon :size="20">
                        <Close />
                    </el-icon>
                </div>
                <el-descriptions :column="1">
                    <el-descriptions-item label="Username：">{{ state.user.username }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="E-mail：">{{ state.user.email }}</el-descriptions-item> -->
                </el-descriptions>
                <el-button @click="loginOut" style="width: 100%;margin-top: 20px;" type="info">
                    退 出 登 录
                </el-button>
                <el-button @click="() => { state.ifShow = false }" style="width: 100%;margin-top: 20px;margin-left: 0;"
                    type="primary">
                    取 消
                </el-button>
            </div>
        </Transition>
    </div>
</template>
<style lang="scss" scoped>
.user-warp {

    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    transition: all 3s;
    background-color: var(--c-shadow);

    .v-enter-active,
    .v-leave-active {
        transition: opacity 0.5s ease;
    }

    .v-enter-from,
    .v-leave-to {
        opacity: 0;
    }

    .user {
        width: 350px;
        background-color: var(--c-base);
        left: calc(50% - 175px);
        top: 20%;
        border-radius: 10px;
        overflow: hidden;
        padding: 60px 30px 40px 30px;
        transition: 0.5s;
        position: absolute;

        .close {
            cursor: pointer;
            transition: .3s;
            width: max-content;
            position: absolute;
            right: 20px;
            top: 20px;

            &:hover {
                color: var(--el-color-primary);
            }
        }

    }
}
</style>

